<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="1300" destroy-on-close @closed="$emit('closed')" align-center :close-on-click-modal="false" draggable overflow>
        <el-container>
            <el-header>
                <div class="left-panel">
                    <el-button type="primary" icon="el-icon-plus" @click="add" v-auth="'pickup.add'"></el-button>
                    <el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length == 0" @click="batch_del" v-auth="'pickup.delete'"></el-button>
                </div>
                <!-- <div class="right-panel">
                    <div class="right-panel-search">
                        <el-input v-model="search.paytype_name" placeholder="名称" clearable @keyup.enter="upsearch"></el-input>
                        <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                        <el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
                    </div>
                </div> -->
            </el-header>
            <el-main class="nopadding">
                <scTable ref="table" row-key="id" :apiObj="apiObj" stripe remoteSort remoteFilter border height="650" :params="query">
                    <el-table-column width="1"></el-table-column>
                    <el-table-column type="index" width="60" align="center"></el-table-column>
                    <!-- <el-table-column label="ID" prop="id" align="center" width="80"></el-table-column> -->
                    <el-table-column label="Time" prop="time" align="center" width="170"></el-table-column>
                    <el-table-column label="Amount" prop="amount" align="center"></el-table-column>
                    <el-table-column label="Driver" prop="driver" align="center"></el-table-column>
                    <el-table-column label="Operater" prop="operater" align="center"></el-table-column>
                    <el-table-column label="Remark" prop="remark" align="center"></el-table-column>
                    <el-table-column label="操作" align="center" width="200">
                        <template #default="scope">
                            <div class="buttonFlex">
                                <el-button type="primary" size="small" @click="table_show(scope.row, scope.$index)" v-auth="'pickup.show'">查看</el-button>
                                <el-button type="primary" size="small" @click="table_edit(scope.row, scope.$index)" v-auth="'pickup.edit'">编辑</el-button>
                                <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                                    <template #reference>
                                        <el-button type="danger" size="small" v-auth="'pickup.delete'">删除</el-button>
                                    </template>
                                </el-popconfirm>
                            </div>
                        </template>
                    </el-table-column>
                </scTable>
            </el-main>
        </el-container>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
		</template>
        <pick-save v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></pick-save>
	</el-dialog>
</template>

<script>
import PickSave from './pickSave.vue';
export default {
     props: {
        query: { type: Object, default: () => ({}) },
    },
    components: { PickSave },
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '提货',
				edit: '提货',
				show: '查看'
			},
			visible: false,
			apiObj: this.$API.business.pick.list,
			selection: [],
			search: {
				name: null,
			},
            dialog: {
				save: false,
			},
		}
	},
	mounted() {
	},
	methods: {
		// 显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
        //新增
		add() {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('add').getId(this.query.contract_id)
			})
		},
        //查看
		table_show(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('show').setData(row)
			})
		},
        //编辑
		table_edit(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('edit').setData(row)
			})
		},
		//删除
		async table_del(row) {
			var reqData = {id: row.id}
			var res = await this.$API.business.pick.delete.post(reqData);
			if (res.code == 1) {
				this.$refs.table.refresh()
				this.$message.success("删除成功")
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
        // 更新商品新增
        handleSuccess(data, mode) {
			if (mode == 'add') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			}
		},
        //搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
        refresh(){
            for (const key in this.search) {
                this.search[key] = null;
            }
            this.$refs.table.upData(this.search)
        },
	}
}
</script>

<style></style>
